<script setup>
import { onLoad, onPageScroll, onShow } from '@dcloudio/uni-app';
import { computed, onMounted, ref, watch } from 'vue';
import { workDetailApi,likeWorkApi,workLikeNumApi,isLikeWorkApi,dislikeWorkApi,workFavorNumApi,isFavorWorkApi,favorWorkApi,disfavorWorkApi } from "@/apis/work.js";
import { commentAddApi,commentListApi,commentLikeApi,commentdisLikeApi } from '@/apis/comments.js'

const commentFlag = ref(false)
const workDetail = ref()
const likeNum = ref(1)


const dataInit = async()=>{
  const isLikeRes = await isLikeWorkApi({'workId':comment.value.workId})
  islike.value = isLikeRes.data
  if(isLikeRes.data){
    likeType.value = 'heart-filled'
    color.value = '#e5404f'
  }else{
    likeType.value = 'heart'
    color.value = '#666666'
  }
  // 发送请求获取这个work的点赞数量
  const likeNumRes = await workLikeNumApi({'workId':comment.value.workId})
  likeNum.value = likeNumRes.data


  const isFavorRes = await isFavorWorkApi({'workId':comment.value.workId})
  isFavor.value = isFavorRes.data
  if(isFavorRes.data){
    favorType.value = 'star-filled'
    colorFavor.value = '#ffcd41'
  }else{
    favorType.value = 'star'
    colorFavor.value = '#666666'
  }
  // 发送请求获取这个work的点赞数量
  const favorNumRes = await workFavorNumApi({'workId':comment.value.workId})
  favorNum.value = favorNumRes.data
}

onShow(()=>{
    dataInit()
})

onLoad(async (options)=>{
    const systemInfo = uni.getSystemInfoSync();
    userWidth.value = systemInfo.screenWidth;
    userHeight.value = systemInfo.screenHeight;

    comment.value.workId = options.workId
    // 根据作品ID获取作品相关信息
    const workRes = await workDetailApi({'workId':options.workId})
    if(workRes.code === 200){
        workDetail.value = workRes.data
    }
    const commentRes = await commentListApi(options.workId)
    if(commentRes.code === 200){
        commentList.value = commentRes.data
        commentFlag.value = commentRes.haveComment
    }
    console.log(commentRes);
    dataInit()
    
})
const commentList = ref()

const userWidth = ref();
const userHeight = ref();

const islike = ref(false)
const likeType = ref('heart')
const color = ref('#666666')
const like = async()=>{
  islike.value = !islike.value
  if(islike.value){
      likeType.value = 'heart-filled'
      color.value = '#e5404f'
      const res = await likeWorkApi({'workId':comment.value.workId})
    }else{
      likeType.value = 'heart'
      color.value = '#666666'
      const res = await dislikeWorkApi({'workId':comment.value.workId})
    }
    const likeNumRes = await workLikeNumApi({'workId':comment.value.workId})
    likeNum.value = likeNumRes.data
}

const isFavor = ref(false)
const favorType = ref('star')
const colorFavor = ref('#666666')
const favorNum = ref(1)
const favor = async ()=>{
  isFavor.value = !isFavor.value
  if(isFavor.value){
    favorType.value = 'star-filled'
    colorFavor.value = '#ffcd41'
    const res = await favorWorkApi({'workId':comment.value.workId})
  }else{
    favorType.value = 'star'
    colorFavor.value = '#666666'
    const res = await disfavorWorkApi({'workId':comment.value.workId})
  }
  const favorNumRes = await workFavorNumApi({'workId':comment.value.workId})
  favorNum.value = favorNumRes.data
}

const commentLike = async(user)=>{
    user.islike = !user.islike
    if(user.islike){
        const res = await commentLikeApi(user.commentId,user.workId)
        user.likeNum = res.data
        // 点赞评论
        user.likeType = 'heart-filled'
        user.likeColor = '#e5404f'
    }else{
        const res = await commentdisLikeApi(user.commentId,user.workId)
        user.likeNum = res.data
        // 取消点赞评论
        user.likeType = 'heart'
        user.likeColor = '#666666'
    }
}

const comment = ref({
    workId: 0,
    commentContent: ''
})

const send = async()=>{
    // 发送
    const res = await commentAddApi(comment.value)
    if (res.code === 200) {
        const commentRes = await commentListApi(comment.value.workId)
        if(commentRes.code === 200){
            commentList.value = commentRes.data
            commentFlag.value = commentRes.haveComment
        }
        comment.value.commentContent = ''
    }
    // uni.redirectTo({
    //     url:`/components/workInfo?workId=${comment.value.workId}`
    // })
}



</script>
<template>
<view :style="{'width': `${userWidth}px`,'height':`${userHeight}px`, 'background-color':' #fff'}">
    <!-- 顶栏 -->
    <div class="header">
        <!-- 头像 -->
        <div class="img">
            <img  :src="workDetail.avatarImg" style="width: 100%; height: 100%;border-radius: 10%; overflow: hidden;"/>
        </div>
        <text class="name">{{workDetail.userName}}</text>
    </div>
    <!-- 内容 -->
    <div class="container">
        <!-- 作品图片 -->
        <view class="workImg">
            <swiper circular indicator-dots="true" autoplay="true" interval="2000"
				duration="500" class="swiper">
				<swiper-item class="swiperItem" v-for="(image,index) in workDetail.images" :key="index">
					<image :src="image" mode="scaleToFill" style="width: 100%; height: 100%"/>
				</swiper-item>
			</swiper>
        </view>
        <div class="workContent">
            <!-- 标题 -->
            <div>
                <text class="title">{{workDetail.workTitle}}</text>
            </div>
            <!-- 内容 -->
            <div>
                <text>{{workDetail.workContent}}</text>
            </div>
        </div>
        <!-- 评论区 -->
        <div class="comments" v-for="(c,index) in commentList" :key="index">
        <!-- 单条评论 -->
         <!-- 可能需要封装 -->
            <div class="singleComment">
                <!-- 头像 -->
                <div class="left">
                    <!-- ../static/images/head.png -->
                    <div class="commenterImage">
                        <image :src=c.avatarImg mode="scaleToFill" style="width: 100%; height: 100%; border-radius: 50%;overflow: hidden;"/>
                    </div>
                </div>
                <div class="center">
                        <div class="commenterName">
                            <!-- 评论人名称 -->
                            {{ c.userName }}
                        </div>
                        <div class="commentContent">
                            <!-- 评论内容 -->
                            {{ c.commentContent }}
                        </div>
                </div>
                <!-- 点赞 -->
                <div class="right">
                    <uni-icons :type="c.likeType" size="18" :color="c.likeColor" @click="commentLike(c)"></uni-icons>
                    <div v-if="c.likeNum > 0">
                        <text >{{c.likeNum}}</text>
                    </div>
                    <div v-else>
                        <text>点赞</text>
                    </div>
                </div>
            </div>
            
         </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
        <div class="talksome">
            <uni-easyinput v-model="comment.commentContent" placeholder="请输入内容"></uni-easyinput>
        </div>
        <div class="send" @click="send()">
            <text>发送</text>
            <uni-icons type="chatboxes" size="18"></uni-icons>
        </div>
        <div class="like" @click="like">
            <uni-icons :type="likeType" size="18" :color="color" ></uni-icons>
            <text v-if="islike">{{ likeNum }}</text>
            <text v-else>点赞</text>
        </div>
        <div class="favor" @click="favor">
            <uni-icons :type="favorType" size="18" :color="colorFavor" ></uni-icons>
            <text v-if="isFavor">{{ favorNum }}</text>
            <text v-else>收藏</text>
        </div>
         
    </div>
</view>
</template>
<style scoped>
.header {
    height: 7%;
    position: sticky;
    z-index: 100;
    top: 0;
    display: flex;
    border-bottom: 2rpx solid #f1f3f4;
    background: #fff;
}
.img {
    width: 7%;
    margin: 20rpx;
}
.footer{
    height: 13%;
    position: sticky;
    z-index: 100;
    bottom: 0;
    background-color: #fff;
    display: flex;
    align-items: center; 
    border-top: 1px solid #f1f3f4;
}
.container {
    height: 80%;
    overflow-y: auto;
}
.name {
    color: #82969c;
    margin-top: 3%;
}
.talksome{
    margin-left: 10rpx;
    border-radius: 20%;
    width: 45%;
}
.favor,.send,.like {
    margin-left: 10rpx;
}
.workImg {
    width: 100%;
    height: 70%;
}
.title {
  font-weight: bold;
}
.swiper {
    height: 100%;
}
.workContent {
    height: 10%;
}
.singleComment {
    width: 100%;
    justify-content: space-between; /* 这将确保A和C分别靠在两边的边框 */
    display: flex;
}
.left,.right {
    width: 10%;
    flex: 0 0 auto; /* AC不会增长或收缩，保持其固有尺寸 */
}
.center {
    margin: 10rpx;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto; /* B会填充剩余空间 */
}
.workContent {
    border-bottom: 2rpx solid #f1f3f4;
}
.commenterName {
    color: #82969c;
}
.commenterImage {
    height: 57%; 
}

</style>
